<script setup lang="ts">
import { generateUUId } from "@whjxtech/jxtech-component";
import { onMounted, reactive, watch } from "vue";
import { useThemesStore } from "/@/stores/modules/themes";

const themesStore = useThemesStore();

const FooterBarState = reactive({
  id: generateUUId(),
  marginTop: "44px",
  containerWidth: "100vw",
  setMarginTop() {
    const dom = document.getElementById(FooterBarState.id)!;
    if (dom.clientHeight > 0) {
      FooterBarState.marginTop = dom.clientHeight + "px";
    }
  },
  setContainerWidth(width: number) {
    if (themesStore.multipleLayoutType === "basicLayout") {
      if (width === 0) {
        const dom = document.getElementById("leftLayoutEl")!;
        width = Number(dom.style.width.replace("px", ""));
      }
    } else {
      width = 0;
    }
    FooterBarState.containerWidth = width > 0 ? "calc(100vw - " + width + "px)" : "100vw";
  }
});

watch(
  () => themesStore.leftWidth,
  val => {
    FooterBarState.setContainerWidth(val);
  }
);

onMounted(() => {
  //console.log(themesStore.getLeftWidth());
  FooterBarState.setMarginTop();
  FooterBarState.setContainerWidth(themesStore.leftWidth);
});
</script>
<template>
  <div :style="{ marginTop: FooterBarState.marginTop }"></div>
  <div :id="FooterBarState.id" class="jxtech-footer-bar-container" :style="{ width: FooterBarState.containerWidth }">
    <div class="jxtech-footer-bar-left">
      <slot name="left"></slot>
    </div>
    <div class="jxtech-footer-bar-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>
<style scoped lang="scss">
.jxtech-footer-bar-container {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 24px;
  line-height: 44px;
  background: #ffffff;
  border-top: 1px solid rgb(5 5 5 / 6%);
  box-shadow: 0 6px 16px rgb(0 0 0 / 8%);
  .jxtech-footer-bar-left {
    flex: 1;
  }
}
</style>
